import { lazy, Suspense } from "react"
import { Navigate, useRoutes } from "react-router-dom"

const Main = lazy(() => import("../pages/Main"))
const Home = lazy(() => import("../pages/Main/Home"))
const About = lazy(() => import("../pages/Main/About"))

const comp = (Comp) => {
    return <Suspense>
        <Comp />
    </Suspense>
}

const root = [
    {
        path: '/main',
        element: comp(Main),
        children: [
            {
                path: '/main/home',
                element: comp(Home),
            },
            {
                path: '/main/about',
                element: comp(About),
            },
        ],
    },
    {
        path: '/',
        element: <Navigate to={'/main'} />
    },
    {
        path: '*',
        element: <Navigate to={'/main'} />
    }
]


export default root

export const GetRoute = () => {
    return useRoutes(root)
}
